<template>
  <div class="base-info-view">
    <el-form
      class="form-detail"
      label-position="right"
      label-width="120px"
    >
      <el-row
        :gutter="20"
        style="width:100%"
      >
        <el-col :span="8">
          <el-form-item
            label="流程编号："
            style="width: 100%;"
          >
            <span>{{ detailData.processNo }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="创建时间："
            style="width: 100%;"
          >
            {{ dateFormat('yyyy-mm-dd HH:MM', detailData.startTime) }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="创建人："
            style="width: 100%;"
          >
            <span>{{ detailData.initiator }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <item-title title="产品信息" />
    <el-form
      class="form-detail"
      label-position="right"
      label-width="120px"
    >
      <el-row
        :gutter="20"
        style="width:100%"
      >
        <el-col :span="8">
          <el-form-item label="产品编号：">
            <div>{{ data?.productNumber || '无' }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="通用名：">
            <div>{{ data?.productPopularName || '无' }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品别名：">
            <div>{{ data?.productAlias || '无' }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品名：">
            <div>{{ data?.productName || '无' }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="批准文号：">
            <div>{{ data?.approvalNumber || '无' }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生产厂家：">
            <div>{{ data?.producer || '无' }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计价单位：">
            <div>{{ getLabel('sell_unit', data?.sellUnit) || '无' }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="市场价：">
            <div>
              <span>{{ data?.marketPrice||0 }}元</span>
              <span v-if="data?.sellUnit">/{{ getLabel('sell_unit', data?.sellUnit) }}</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="医保价：">
            <div>
              <span>{{ data?.medicalInsurancePrice||0 }}元</span>
              <span v-if="data?.sellUnit">/{{ getLabel('sell_unit', data?.sellUnit) }}</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="剂型：">
            <div v-if="data?.drugForm">{{ getLabel('drug_form', data?.drugForm) }}</div>
            <div v-else>无</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品线：">
            <div>{{ data?.productLineDetail?.productLineName || '无' }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="包装规格：">
            <div>{{ data?.packSpecs }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="中包装：">
            <div v-if="data?.mPackNum">{{ data?.mPackNum }}{{ getLabel('sell_unit', data?.sellUnit) }} / {{ getLabel('sell_unit', data?.mPackUnit) }}</div>
            <div v-else>未设置</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="大包装：">
            <div v-if="data?.lPackNum">{{ data?.lPackNum }}{{ getLabel('sell_unit', data?.sellUnit) }} / {{ getLabel('sell_unit', data?.lPackUnit) }}</div>
            <div v-else>未设置</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建人：">
            <div>{{ data?.creatorName }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间：">
            <div>{{ dateFormat("yyyy-mm-dd HH:MM", data?.createdAt) }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他描述：">
            <div>{{ data?.remark || '无' }}</div>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row
        :gutter="20"
        style="width:100%"
      >
        <el-col :span="24">
          <el-form-item label="说明书：">
            <div
              v-if="data?.instruction&&data.instruction.length"
              class="img-container"
            >
              <div
                v-for="(item, index) in data.instruction"
                :key="item"
                class="img-item"
              >
                <el-image
                  :src="item.url"
                  :preview-src-list="data.instruction.map(p=>p.url)"
                  :initial-index="1"
                />
              </div>
            </div>
            <div v-else>无</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row
        :gutter="20"
        style="width:100%"
      >
        <el-col :span="24">
          <el-form-item label="产品图片：">
            <div
              v-if="data?.images&&data.images.length"
              class="img-container"
            >
              <div
                v-for="(item, index) in data.images"
                :key="item"
                class="img-item"
              >
                <el-image
                  :src="item.url"
                  :preview-src-list="data.images.map(p=>p.url)"
                  :initial-index="1"
                />
              </div>
            </div>
            <div v-else>无</div>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row
        :gutter="20"
        style="width:100%"
      >
        <el-col :span="24">
          <el-form-item label="下架原因：">
            <div>{{ data?.productDownReason || '无' }}</div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

  </div>
</template>

<script>
import {reactive, toRefs, watch} from 'vue'

export default {
  name: 'BaseInfo',
  props: {
    detailData: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, context) {
    var reactiveData = reactive({
      detailData: {},
      data: props.detailData.data || {},
    })
    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval) {
          reactiveData.detailData = newval
          reactiveData.data = newval.data
          console.log(232)
        }
      },
      { immediate: true, deep: true }
    )
    return {
      ...toRefs(props),
      ...toRefs(reactiveData),
    }
  },
}
</script>

<style lang="scss" scoped>
.img-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .img-item {
    width: 150px;
    height: 150px;
    padding: 5px;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    margin-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-image {
      width: 100%;
    }
  }
}
</style>
